<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://xmlns.jcp.org/jsf/passthrough">
    <h:head>
        <title>Chat</title>
    </h:head>
    <h:body>
        <h:form>
            <h:outputScript library="js" name="jquery-1.10.2.js" />
            <h:outputScript library="js" name="chat.js" />
            <h:outputScript library="js" name="bulletin.js"/>
            <h:outputStylesheet library="css" name="site.css"/>
            <script>
                var chat;
                var bulletin;
                $(document).ready(function() {
                    chat = new Chat("support","Awaiting a client.");
                    bulletin = new Bulletin();
                });
                
                function sendFinish() {
                    var message = {"type":"command","command":"closeConversation"};
                    chat.sendCommand(message);
                }
                
                
                
            </script>
            <div>Chat</div>
            <div id="" style="width: 100">
                <div>
                    Support Bulletin
                </div>
                Representatives:  
                Waiting clients: 
                <div id=""></div>
            </div>
            <div id="messageWindow" style="width:500px; height:300px; overflow:scroll;"></div>
            <br/>
            <input id="message" size="50" type="text"/>
            <button id="btnSend" onclick="chat.postMessage();" type="button">Send</button>
            <button id="btnClose" onclick="sendFinish();" type="button">End Chat</button>
            <button id="btnClose" onclick="chat.closeWebSocket();" type="button">Quit</button>
            <br/>
        </h:form>
    </h:body>
</html>